<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Station Device Application</title>
    <link href="/public/css/device.css?version=1" rel="stylesheet" type="text/css" />
    <link href="/public/lib/bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
    <link href="/public/lib/adminlte/js/adminlte.min.js" rel="stylesheet" type="text/css" />
    <link href="/public/lib/adminlte/css/adminlte.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="/ajax/libs/vue/2.7.10/vue.js"></script>
    <script src="/ajax/libs/axios/0.21.0/axios.min.js"></script>

    <script type="text/javascript" src="/ajax/libs/iview/3.5.0/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/ajax/libs/iview/3.5.0/styles/iview.css">

    <link href="/public/lib/ionicons/3.0.0/css/ionicons.css" rel="stylesheet">
    <link href="/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
</head>
<body>
<div id="app" class="app-container">
    <div class="kc-menu-fixed">
        <i-menu mode="horizontal" ref="menu" class="kc-menu"  :active-name="activeMenu">
            <menu-item v-for="menu in menus"  :key="menu.name"  :name="menu.name" :to="menu.url" >
                <i :class="menu.icon"></i>
                {{menu.title}}
            </menu-item>
        </i-menu>
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="card" style="margin-top: 1rem">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas  fa-th-large"></i> {{ i18n["device.html.running_mode"]}}</h3>
                    <div class="card-tools">
                        <ul class="nav nav-pills ml-auto">
                            <li class="nav-item" @click="changeMode(true)">
                                <a class="nav-link" :class="{'active': (debugMode) }" data-toggle="tab"
                                >{{ i18n["device.html.debug"]}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- /.card-header -->
                <!-- form start -->

                <div class="card-body">
                    <div class="wrap-text">
                        {{ i18n["device.html.slant_tip1"]}}
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
            <!-- Horizontal Form -->
            <div class="card" style="margin-top: 1rem">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas  fa-th-large"></i> {{ i18n["device.html.slant"]}}</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->

                <div class="card-body">
                    <div class="row">
                            <!-- 第一个表格 -->
                            <table class="table table-bordered text-center col-3" >
                                <thead>
                                <tr>
                                    <th>{{ i18n["device.html.left_point"]}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-block btn-lg btn-outline-primary"  @click="openautolift('left')">
                                            {{ i18n["device.html.slant.Openautolift"]}}
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-block btn-lg btn-outline-primary"  @click="lift('left')">
                                            {{ i18n["device.html.slant.Lift"]}}
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-block btn-lg btn-outline-primary"  @click="lower('left')">
                                            {{ i18n["device.html.slant.Lower"]}}
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <!-- 第二个表格 -->
                            <table class="table table-bordered text-center col-3">
                                <thead>
                                <tr>
                                    <th>{{ i18n["device.html.right_point"]}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-block btn-lg btn-outline-primary" @click="openautolift('right')">
                                            {{ i18n["device.html.slant.Openautolift"]}}
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-block btn-lg btn-outline-primary" @click="lift('right')">
                                            {{ i18n["device.html.slant.Lift"]}}
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-block btn-lg btn-outline-primary" @click="lower('right')">
                                            {{ i18n["device.html.slant.Lower"]}}
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
    </section>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data () {
            return {
                i18n:{},
                activeMenu:'slant',
                menus:[{
                    name:'index',
                    url:'/admin/device/index',
                    icon:'fas fa-warehouse',
                    title:'系统信息'
                },{
                    name:'config',
                    url:'/admin/device/config',
                    icon:'fas fa-cogs',
                    title:'设置'
                }],
                deviceUrl: "http://localhost:8888/station/device/code",
                deviceCode: "1231232",
                stationCode: "",
                localIP: "127.0.0.1",
                hostIP: "127.0.0.1",
                visible: false,
                debugMode: true,
                properties:{
                    "hostIP": "172.31.214.50",
                    "warehouseId": 1,
                    "devicePtlEnabled": true,
                    "devicePtlImpl": "DefaultLightDevice",
                    "devicePtlQuantity": 100,
                    "devicePtlIP": "127.0.0.1",
                    "devicePtlPort": 5003,
                    "devicePtlControlID": 1,

                    "deviceSlantEnabled": true,
                    "deviceSlantIP": "192.168.2.111",
                    "deviceSlantPort": 2200,

                    "deviceStripEnabled": true,
                    "deviceStripIP": "10.0.50.100",
                    "deviceStripPort": 4660,

                    "deviceCameraEnabled": true,
                    "deviceCameraModel": "TCP",
                    "deviceCameraDirection": "inner",
                    "deviceCameraScanBeforeEnter": false,
                    "deviceCameraConnections": [
                        {
                            "station": "Station_1",
                            "point": "187",
                            "ip": "127.0.0.1",
                            "port": 0
                        },
                        {
                            "station": "Station_1",
                            "point": "188",
                            "ip": "172.31.214.50",
                            "port": 0
                        }
                    ],
                    "localIP": "172.31.245.55"
                }
            }
        },
        mounted() {
            window.app = this;
            // 界面初始化信息
            this.getI18NResource();
            this.getMenus(this.activeMenu);
            // 界面数据初始化
            this.init();
        },
        methods: {
            init(){
                // 加载系统配置信息
                this.getDeviceProperties();
            },
            getDeviceProperties(){
                axios.get('/station/device/properties/get')
                    .then(response => {
                        let result = response.data
                        this.properties = result.data;
                    })
                    .catch(error => {
                        let prefixMessage = this.i18n["device.error.FAIL"]
                        this.$Message.error(prefixMessage+":"+error);
                    });
            },
            getI18NResource(){
                axios.get('/admin/i18n/mappings/default')
                    .then(response => {
                        let result = response.data
                        this.i18n = result.data;
                    })
                    .catch(error => {
                        let prefixMessage = this.i18n["device.error.FAIL"]
                        this.$Message.error(prefixMessage+":"+error);
                    });
            },
            getMenus(activeMenu){
                axios.get('/admin/device/menus')
                    .then(response => {
                        if(!response.data.success){throw response.data.message;}
                        let result = response.data
                        this.menus = result.data;
                        this.$nextTick(() => {
                            this.$refs.menu.updateActiveName(activeMenu);
                        });
                    })
                    .catch(error => {
                        this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
                    });
            },
            reload(){
                window.location.reload();
            },
            refreshData(){

            },
            openautolift(data){
                axios.post('/admin/device/slant/operation',{
                    inDebugMode:this.inDebugMode,
                    stationCode:"",
                    position:data,
                    type: "OpenAutoLift"
                })
                    .then(response => {
                        if(!response.data.success){throw response.data.message;}
                        this.$Message.success(this.i18n["device.error.SUCCESS"]);
                    })
                    .catch(error => {
                        this.$Message.error(this.i18n["device.error.FAIL"]+":"+error);
                    });
            },
            lift(data){
                axios.post('/admin/device/slant/operation', {
                    inDebugMode:this.inDebugMode,
                    stationCode:"",
                    position:data,
                    type: "Lift"
                })
                    .then(response => {
                        if(!response.data.success){throw response.data.message;}
                        this.$Message.success(this.i18n["device.error.SUCCESS"]);
                    })
                    .catch(error => {
                        this.$Message.error(this.i18n["device.error.FAIL"]+":"+error);
                    });
            },
            lower(data){
                axios.post('/admin/device/slant/operation', {
                    inDebugMode:this.inDebugMode,
                    stationCode:"",
                    position:data,
                    type: "Lower"
                })
                    .then(response => {
                        if(!response.data.success){throw response.data.message;}
                        this.$Message.success(this.i18n["device.error.SUCCESS"]);
                    })
                    .catch(error => {
                        this.$Message.error(this.i18n["device.error.FAIL"]+":"+error);
                    });
            }
        }
    });
    //app.use(ViewUIPlus);
    //app.mount("#app");
</script>
</body>
</html>